<template>
  <div>
    <div class="container">
      <div class="col-md-10 col-md-offset-1">
        <div class="text-center">
          <vue2-org-tree name="test"
            :data="data"
            :horizontal="horizontal"
            :label-class-name="labelClassName"
            :render-content="renderContent"
          />
          <!-- @on-expand="onExpand"
            @on-node-click="onNodeClick" -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: ''
    }
  },
  data() {
    return {
      horizontal: false,
      collapsable: true,
      expandAll: false,
      labelClassName: 'bg-blue'
    };
  },
  created() {
  },
  
  methods: {
    renderContent(h, data) {
      return data.label;
    },
    onExpand(data) {
      if ('expand' in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, 'expand', true);
      }
    },
    onNodeClick(e, data) {
      //alert(data.label);
    },
    collapse(list) {
      var _this = this;
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function(item) {
          _this.$set(item, 'expand', val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, 'expand', val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    }
  }
};
</script>
<style lang="less">
  @import "~vue2-org-tree/dist/style.css";
  .org-boxs{
    width:100%;
    height:100%;
    text-align: center;
    /*background: #030C24;*/
    background-image: -webkit-radial-gradient(ellipse farthest-corner at center 40%, #000d4d 0%, #000105 100%);
    background-image: radial-gradient(ellipse farthest-corner at center 40%, #000d4d 0%, #000105 100%);
    overflow-y: scroll;
  }
  .org-tree-container{
    background:none!important;
  }
  .org-tree-node-label {
    white-space: nowrap;
  }
  .bg-none{
    background-color:#030C24;
    color:#ffffed;
  }
  .bg-white {
     background-color: #ECF5FF;
   }
  .org-tree-node-label .org-tree-node-label-inner {
    min-width:6vw;
    padding: 10px 10px;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
   /* border: 1px solid @colors;*/
    overflow: hidden;
    box-sizing: border-box;
  }
  .bg-tomato {
    background-color: #9E4A1C;
    color: #fff;
  }
  .bg-gold {
    background-color: #ECA150;
  }
  .bg-gray {
    background-color: #e3e3e3;
  }
  .bg-lightpink {
    background-color: lightpink;
  }
  .bg-blue {
    background-color: #057D9F;
    color: #fff;
  }
  .bg-green {
    background-color: #50CB90;
  }
</style>